<!DOCTYPE html>
<html>
<head>
    <title>Custom templates</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" id="listview-templates" data-init="mobileListViewTemplatesInit" data-title="ListView">
    <div class="head">&nbsp;</div>  
    <ul id="custom-listview"></ul>
</div>

<script type="text/x-kendo-template" id="customListViewTemplate">
    <img class="item-photo" src="${url}" />
    <h3 class="item-title">${name}</h3>
    <p class="item-info">${description}</p>
    <a data-role="button" class="details-link">Order</a>
</script>

<script>
    var groupedData = [
        { name: "Sashimi Salad", description: "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.", url: "../../content/mobile/listview/sashimi-salad.jpg", letter: "S" },
        { name: "Seaweed Salad", description: "A nice seaweed salad.", url: "../../content/mobile/listview/seaweed-salad.jpg", letter: "S" },
        { name: "Edamame", description: "Boiled soy beans with salt.", url: "../../content/mobile/listview/edamame.jpg", letter: "E" },
        { name: "Maguro", description: "Tuna pieces.", url: "../../content/mobile/listview/maguro.jpg", letter: "M" },
        { name: "Tekka Maki", description: "Tuna roll with wasabi.", url: "../../content/mobile/listview/tekka-maki.jpg", letter: "T" },
        { name: "California Rolls", description: "Crab sticks, avocado and cucumber.", url: "../../content/mobile/listview/california-rolls.jpg", letter: "C" }
    ];

    function mobileListViewTemplatesInit() {
        $("#custom-listview").kendoMobileListView({
            dataSource: kendo.data.DataSource.create({data: groupedData, group: "letter" }),
            template: $("#customListViewTemplate").html(),
            headerTemplate: "<h2>Letter ${value}</h2>"
        });
    }
</script>

<style scoped>
#listview-templates .head {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 100px;
	background: url(../../content/mobile/listview/food.jpg) no-repeat center top;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}

.km-ios #listview-templates .km-navbar .km-button
{
    background-color: #974d2e;
}

.km-ios #listview-templates .km-navbar, .km-ios #listview-templates .km-content .km-button {
	    background: url(../../content/shared/images/patterns/pattern9.png);
}

.km-ios #listview-templates .km-content .km-button {
	    border: none;
}

.item-photo {
    width: 4em;
    height: 4em;
    float: left;
    margin: .5em 0;
    -webkit-box-shadow: 0 1px 3px #333;
    box-shadow: 0 1px 3px #333;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

#custom-listview .item-title {
	float: left;
	font-size: 1em;
    line-height: 1.4em;
    margin: .3em 1em 0 .6em;
    width: 50%;
}
#custom-listview .item-info {
	float: left;
	font-size: .7em;
	line-height: 1em;
    margin: 0 0 0 .95em;
    width: 45%;
}

.km-ios #custom-listview .item-title, .km-ios #custom-listview .item-info {
    color: #4c2a1b;
}

.km-ios #custom-listview .item-info {
    color: #974d2e;
}

.details-link {
    margin-top: -1em;
    position: absolute;
    right: 0.6em;
    top: 50%;
}
.km-listview .km-list {
    margin: 0;
}

.km-root .km-listview .km-group-title {
	padding: 0;
	border-top: 0;
	box-shadow: none;
}

.km-root .km-group-title h2 {
	margin: 0;
	padding-top: .2em;
	padding-bottom: .2em;
	color: #fff;
	text-shadow: none;
}

.km-ios .km-group-title h2 {
	color: #974d2e;
	font-weight: normal;
	font-size: 1.4em;
	background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.45) 6%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(100, 100, 100, 0)), url(../../content/shared/images/patterns/pattern4.png);
	background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(0.06, rgba(255, 255, 255, 0.45)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(1, rgba(100, 100, 100, 0))), url(../../content/shared/images/patterns/pattern4.png);
}

.km-ios #listview-templates .km-listview .km-list {
	border-top-color: #dcbe87;
	background-image: url(../../content/shared/images/patterns/pattern8.png);
}

.km-blackberry .km-group-title h2 {
	color: #000;
	background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.45) 6%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(100, 100, 100, 0));
	background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(0.06, rgba(255, 255, 255, 0.45)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(1, rgba(100, 100, 100, 0)));
}
.km-tablet .km-ios #listview-templates .km-view-title {
    color: #fff;
    text-shadow: 0 -1px rgba(0,0,0,.5);
}
</style>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
